﻿<!DOCTYPE html>
<html>
<head>
    <title>Wufoo Helper for WebMatrix - Start Here</title>
    <link href="content/Site.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="content/images/webx-icon.png" alt="WebMatrix" />
            <img src="content/images/wufoo-logo.png" alt="Wufoo Logo" class="partnerLogo" />
            <h1>
                Microsoft WebMatrix Helpers</h1>
            <h2>
                Wufoo Helper - Start Here</h2>
        </div>
        <div class="content">
            <div class="navLinks">
                <a href="startHere.htm">Start Here</a> | <a href="reference.htm">Helper Reference</a>
            </div>
            <h3>
                Introduction</h3>
            <p>
                Microsoft WebMatrix provides an easy way to get started with web development, and
                together with new Razor syntax for ASP.NET Web Pages it includes everything you
                need to get your web site up, running and integrated with many other sites and networks,
                in a short period of time. The WebMatrix helpers are designed to make your life
                easier when creating web sites. They provide you a simple and consistent way of
                performing common web development tasks that otherwise would require a great deal
                of custom coding. With a few lines of code you should be able to secure your web
                site using membership, store information in Windows Azure Storage, integrate your
                site with Facebook, among others things.
            </p>
            <p>
                The <strong>Wufoo Helper</strong> for WebMatrix provides an easy way to integrate
                Wufoo forms and data into your WebMatrix site. It allows you to add Wufoo forms
                in your pages and integrate the data submitted in your forms by using <a href="http://wufoo.com/docs/integrations/webhooks/">
                    Web Hooks</a>.
            </p>
            <img src="content/images/wufoo-helper.png" height="250" class="centeredImage" alt="Wufoo Helper" />
            <h3>
                Getting Started in 60 Seconds</h3>
            <p>
                The helper mainly consists of a <strong>Wufoo.cshtml</strong> file, that should
                be placed in the <strong>App_Code</strong> folder of your WebMatrix site. To use
                the helper follow these steps:</p>
            <ol>
                <li>If you haven't got an account, <a href="http://wufoo.com/signup/">sign up</a> for
                    a free plan in Wufoo. Also create a new testing form!</li>
                <li>Start by obtaining your Wufoo API Key. To do this, log in to your Wufoo account,
                    head to the Form Manager or <strong>Forms</strong> tab, and click the <strong>Code</strong>
                    button beneath any form. This will take you to the code manager where you’ll want
                    to click the <strong>API Information</strong> button to access your API credentials.
                    On that page there should be a 16 digit code, which is your unique API key.</li>
                <li>Add the following line to the <strong>_AppStart.cshtml</strong> page of your WebMatrix
                    site, replacing the <em>{your-api-key}</em> placeholder with your API Key and the
                    <i>{your-user-name}</i> placeholder with your Wufoo user name (or subdomain if you've
                    changed it).
                    <pre class="code">
@{
    Wufoo.Initialize("{your-api-key}", "{your-user-name}");    
}</pre>
                </li>
                <li>In any WebMatrix page, add the following line to display a Wufoo form. To obtain
                    the form hash value, head to the Form Manager or <strong>Forms</strong> tab, and
                    click the Code button beneath any form. Then click the <strong>API Information</strong>
                    button, in this page you'll find the list of your forms, each with the list of fields
                    and the <strong>hash</strong> value.
                    <pre class="code">
@Wufoo.EmbedForm(formHash: "{form-hash}")
</pre>
                </li>
            </ol>
            <h3>
                Running the Wufoo Helper Sample</h3>
            <p>
                Optionally, you can download a sample WebMatrix web site where you can see the helper
                in action. To download and run it with Microsoft WebMatrix, follow these steps:</p>
            <ol>
                <li>Download the sample site from the helper's <a href="http://wufoohelper.codeplex.com">
                    Codeplex</a> site, Download section. Extract the contents and open the folder in
                    WebMatrix.</li>
                <li>Configure your Wufoo user name and API Key in the <strong>_AppStart.cshtml</strong>
                    page.</li>
                <li>Run the sample! It contains code samples and examples of each feature provided by
                    the helper.</li>
            </ol>
            <h3>
                More Info</h3>
            <p>
                Don't miss the helper's <a href="http://www.youtube.com/watch?v=Ng2k76OVoV0">getting
                    started screencast</a>.
            </p>
            <p>
                You can find more information about Wufoo in <a href="http://wufoo.com/docs/">http://wufoo.com/docs/</a>.
            </p>
            <p>
                Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax <a href="http://www.microsoft.com/web/webmatrix/learn/">
                    with the WebMatrix tutorials</a>.
            </p>
        </div>
        <ul class="footer">
            <li>We're always looking for <a href="mailto:webapp@microsoft.com">bugs, feedback and
                suggestions!</a></li>
            <li>&copy; 2010-2011 Microsoft Corporation. Powered by IIS Express.</li>
        </ul>
    </div>
</body>
</html>
